<script setup>
import {computed, ref} from "vue";
import { ElMessage } from "element-plus";
import {http} from "@/api";
import {useStore} from "vuex";
import {useRoute} from "vue-router";
const store = useStore()
const currentQs = ref({
})
const currentOption = ref({

})
const questionList = ref([])

const currentIndex = computed(() => {
  return questionList.value.findIndex(el => el.id === currentQs.value.id) + 1
})
const nextQuestion = () => {
  if (currentIndex.value < questionList.value.length) {
    currentQs.value = questionList.value[currentIndex.value]
  } else {
    console.log('已经是最后一题')
    ElMessage.warning('已经是最后一题')
  }
}
const prevQuestion = () => {
  console.log('上一题')
  if (currentIndex.value > 1) {
    currentQs.value = questionList.value[currentIndex.value - 2]
  } else {
    console.log('已经是第一题')
    ElMessage.warning('已经是第一题')
  }
}
const route = useRoute()
function getQuestionList() {
  http.answer.read(route.params.id).then(res => {
    questionList.value = JSON.parse(res.data.content).map(el => {
      return {
        ...el,
        is_correct: el.questionOptions.find(item => item.is_correct === 1)?.id === el.active.id
      }
    })
    currentQs.value = questionList.value[0]
    console.log(questionList.value)
  })
}
getQuestionList()
</script>

<template>
  <PageMain title="答题结果">
    <el-row :gutter="20">
      <el-col :span="8"></el-col>
      <el-col :span="8" >
<!--        翻页答题-->
        <el-card style="max-width: 480px">
          <template #header>
            <div class="f-r a-c j-c">
              <el-button type="primary" @click="prevQuestion">上一题</el-button>
              <div style="margin: 0 10px">
                <span style="margin-right: 20px">{{ currentQs.name }}</span>
                <span>第{{ currentIndex }}题</span>
                <span>/</span>
                <span>共{{ questionList.length }}题</span>
              </div>
              <el-button type="primary" @click="nextQuestion">下一题</el-button>
            </div>
          </template>
<!--          显示正确答案-->
          <div v-for="item in currentQs.questionOptions" :key="item.id" :class="['option-item2', {active: item.id === currentQs.active.id, correct: item.is_correct}]">{{ item.value_key }}、{{ item.value }}</div>

        </el-card>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </PageMain>
</template>

<style lang="scss">
.option-item2 {
  padding: 10px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 10px;
  transition: all 0.5s;
  &.active {
    border-color: #e7c7c7;
    background-color: #e7c7c7;
    color: #FFFFFF;
  }
  &.active.correct {
    border-color: #bccebc;
    background-color: #bccebc;
    color: #FFFFFF;
  }
}
</style>